import NavBar from "@/pages/美团案例/components/NavBar/index.tsx";
import Menu from "@/pages/美团案例/components/Menu/index.tsx";
import Cart from "@/pages/美团案例/components/Cart/index.tsx";
import FoodsCategory from "@/pages/美团案例/components/FoodsCategory/index.tsx";

import useRequest from "@/hooks/useRequest.tsx";
import { useEffect } from "react";
import { useTakeawayStore } from "@/store/takeaway";

import "./index.scss";

const App = () => {
  const { response } = useRequest("http://localhost:3004/takeaway");
  const foodsList = useTakeawayStore((state) => state.foodsList);
  const setFoodsList = useTakeawayStore((state) => state.setFoodsList);
  const activeIndex = useTakeawayStore((state) => state.activeIndex);

  useEffect(() => {
    setFoodsList(response);
  }, [response, setFoodsList]);

  return (
    <div className="home">
      {/* 导航 */}
      <NavBar />

      {/* 内容 */}
      <div className="content-wrap">
        <div className="content">
          <Menu />

          <div className="list-content">
            <div className="goods-list">
              {/* 外卖商品列表 */}
              {foodsList.map((item, index) => {
                return (
                  activeIndex == index && (
                    <FoodsCategory
                      key={item.tag}
                      // 列表标签
                      tag={item.tag}
                      // 列表标题
                      name={item.name}
                      // 列表商品
                      foods={item.foods}
                    />
                  )
                );
              })}
            </div>
          </div>
        </div>
      </div>

      {/* 购物车 */}
      <Cart />
    </div>
  );
};

export default App;
